<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 500px;
            overflow: hidden;
        }

        #result {
            width: 100%;
            font-size: 12px;
        }

        dl, dt, dd, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        p {
            font-size: 12px;
        }

        dt {
            font-size: 14px;
            font-family: "微软雅黑";
            font-weight: bold;
            border-bottom: 1px dotted #000;
            padding: 5px 0 5px 5px;
            margin: 5px 0;
        }

        dd {
            padding: 5px 0 0 5px;
        }

        li {
            line-height: 28px;
        }
    </style>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=F0i6SrLmHquLVNLCqpExxPrj8mWVdFwx"></script>
    <!--加载鼠标绘制工具-->
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>

    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"/>
    <!--加载检索信息窗口-->
    <script type="text/javascript"
            src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"/>

    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>添加地图</title>
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;height: 93%">
    <!--<div style="padding: 20px; background-color: #ffffff;">-->
    <!--顶部-->
    <div class="layui-card layui-col-md12" style="border: 0px;background-color: #F2F2F2;">
        <div class="layui-card-header" style="border: 0px;background-color: #F2F2F2;">
            <div class="layui-form-item">
                <label class="layui-form-label">配送地址</label>
                <div class="layui-input-block layui-col-md6" style="    margin-left: 0px">
                    <input id="suggestId" type="text" name="title" lay-verify="title" autocomplete="off"
                           placeholder="请输入地址"
                           class="layui-input">
                    <div id="searchResultPanel"
                         style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                </div>
                <div id="addressArea" class="layui-input-block layui-col-md1" style="margin-left: 20px;border-style: solid;
                border-width: 1px;border-color: black">
                </div>
                <div class="layui-input-block layui-col-md1" style="margin-left: 30px">
                    <button class="addAddress layui-btn layui-btn-radius layui-btn-sm layui-btn-normal" id="addAddress"
                            onclick="sureAddress()"
                            lay-filter="addAddress">确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--地图-->
    <div class="layui-row layui-col-space15" style="border: 0px;background-color: #F2F2F2;height: 100%">
        <div class="layui-col-md12" style="border: 0px;background-color: #F2F2F2;height: 95%">
            <div id="allmap" class="layui-card" style="border: 0px;overflow:hidden;zoom:1;height: 100%">
                <div id="map" class="layui-card-body" style="font-size: 15px;height:100%;-webkit-transition: all 0.5s
                 ease-in-out;transition: all 0.5s ease-in-out;height: 100%"></div>
            </div>
        </div>
    </div>
</div>
<!--<div id="shape">坐标为</div>-->
<script src="/js/map/mapInit.js"></script>
<script src="/js/map/searchMap.js"></script>
<script src="/js/map/overlayMap.js"></script>
<script src="/layui/layui.all.js"></script>
<script type="text/javascript">
    var layer;
    layui.use(['element', 'layer', 'form'], function () {
        var table = layui.table;
        var element = layui.element;
        var $ = layui.jquery;
        layer = layui.layer;
        var form = layui.form;
    })

    //判断传入的points点是否在ply多边形里面，是返回true，否返回false
    /**
     * 判断传入的点是否在多边形里面
     * @param point
     * @returns {boolean}
     */
    function ptInPolygon() {
        var flag = true;
        for (var dbOver in window.dbOverlay) {
            //判断点是否在多边形内
            var result = BMapLib.GeoUtils.isPointInPolygon(window.pp, window.dbOverlay[dbOver]);
            if (result == true) {
                localStorage.setItem("address",$('#suggestId').val())
                // $("p").css("background-color","yellow");
                $("#addressArea").css("background-color",window.dbOverlay[dbOver].getFillColor());
                flag = false;
                return window.dbOverlay[dbOver];
            }
        }
        if (flag){
            $("#addressArea").css("background-color",'');
            localStorage.setItem("address",'')
        }
    }
    /**
     * 确定配送地址
     */
    function sureAddress() {
        // window.pp  地点
        if ($('#suggestId').val() != '' && $('#suggestId').val() != null && $('#suggestId').val() != 'undefined'){
           var over = ptInPolygon();
            console.log("配送地址",window.pp);
            if (over == null){
                layer.msg('您输入的地址不在配送范围内,无法为您配送');
            }else{
                // layer.close(index);
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        }else{
            layer.msg('请输入地址');
        }

    }

    /**
     * 地址改变事件
     * 替换区域背景
     */
    $('#suggestId').change(function () {
        console.log('配送地址变化了')
        //直接调用ptInPolygon()方法会失败,搜索后的pp点没有更新,延时调用会更新
        setTimeout("ptInPolygon()","1300");
    })
</script>
</body>
</html>